import React from 'react'
// ===================================================================== antd
import { Image } from 'antd'
// ===================================================================== global declare
const { $fn, $Lazy} = window
// ===================================================================== antd
const Modal = $Lazy.state(()=>import('@antd/modal'))
const Images = $Lazy.load(()=>import('@antd/image'))
// ===================================================================== private component
// ===================================================================== component
class Index extends React.Component{
	state = {
		data: []
	}
	
	open = data => {
		this.modal.open({ formRef:this.formRef })
		this.setState({ data })
	}
	
	render(){
		const { data } = this.state
		return (
			<Modal
				width 		= '80%'
				height 		= '80%'
				onRef		= { ref => this.modal = ref }
				title		= { '查看图片'}
				onOk		= { () => this.modal.close() }
				isFullScroll
				noFooter
			>
				{
					$fn.hasArray(data) ? (
						<Image.PreviewGroup>
							{data.map((v,i)=><Images  key={i} bordered={false} auto src={v.img_path}/>)}
						</Image.PreviewGroup>
					) : <Images style={{position:'absolute',left:5,top:5,bottom:5,right:5}} bordered={false} src={data}/>
				}
			</Modal>
		)
	}
}

export default Index